<template>
  <div class="error-req-root">
    <el-table border height="100%" tooltip-effect="dark" :data="errorReqStore.requests" empty-text="无错误响应结果">
      <el-table-column prop="httpCode" width="125" label="时间/响应码">
        <template #default="scope">
          <div>{{ scope.row.datetime }}</div>
          <div><el-tag>{{ scope.row.httpCode }}</el-tag></div>
          <div><el-tag>{{ scope.row.code }}</el-tag></div>
        </template>
      </el-table-column>
      <el-table-column prop="url" width="150" label="请求地址" />
      <el-table-column prop="msg" width="200" label="响应信息" />
      <el-table-column prop="exception" width="400" label="异常信息" />
      <el-table-column prop="traceId" width="120" label="traceId" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useErrorReqStore } from '@/stores/errorReq';

const errorReqStore = useErrorReqStore();

</script>

<style scoped lang="scss">
.error-req-root {
  @include box(100%, 100%);
  overflow: scroll;
}
</style>